{{>layout/header}}

<div class="row">
    <div class="col-md-12">
        <form method="get">
            <div class="form-row align-items-center">
                <div class="col-auto">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" id="filter-process-id" name="bpmnProcessId" placeholder="process id" style="width: 15em">
                    </div>
                </div>
                <div class="col-auto">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" id="filter-error-type" name="errorType" placeholder="error type" style="width: 15em">
                    </div>
                </div>
                <div class="col-auto">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" id="filter-created-after" name="createdAfter" placeholder="created after" style="width: 15em">
                        <div class="btn-group dropleft">
                            <button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <svg class="bi" width="12" height="12" fill="silver"><use xlink:href="/img/bootstrap-icons.svg#clock-history"/></svg>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" id="last-7-days" href="#">last 7 days</a>
                                <a class="dropdown-item" id="last-24-hours" href="#">last 24 hours</a>
                                <a class="dropdown-item" id="last-12-hours" href="#">last 12 hours</a>
                                <a class="dropdown-item" id="last-6-hours" href="#">last 6 hours</a>
                                <a class="dropdown-item" id="last-1-hour" href="#">last 1 hour</a>
                                <a class="dropdown-item" id="last-10-minutes" href="#">last 10 minutes</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" id="filter-created-before" name="createdBefore" placeholder="created before" style="width: 15em">
                    </div>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary mb-2"><svg class="bi" width="12" height="12" fill="silver"><use xlink:href="/img/bootstrap-icons.svg#funnel"/></svg> Filter</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <span>{{count}} open incidents</span>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Incident Key</th>
                    <th>Process Instance Key</th>
                    <th>BPMN process id
                        <a id="bpmn-process-id" href="#" class="badge badge-secondary" data-toggle="tooltip"
                           data-placement="top"
                           title="Sort by BPMN process id"></a>
                    </th>
                    <th>Process Definition Key</th>
                    <th>Error Type
                        <a id="error-type" href="#" class="badge badge-secondary" data-toggle="tooltip" data-placement="top"
                           title="Sort by Error Type"></a>
                    </th>
                    <th>State</th>
                    <th>Created Time
                        <a id="created-time" href="#" class="badge badge-secondary" data-toggle="tooltip"
                           data-placement="top"
                           title="Sort by Created Time"></a>
                    </th>
                </tr>
            </thead>

            {{#incidents}}
            <tr>
                <td>{{key}}</td>
                <td>
                    <a href="{{context-path}}views/instances/{{processInstanceKey}}/incident-list">{{processInstanceKey}}</a>
                </td>
                <td>{{bpmnProcessId}}</td>
                <td>
                    <a href="{{context-path}}views/processes/{{processDefinitionKey}}">{{processDefinitionKey}}</a>
                </td>
                <td>{{errorType}}</td>
                <td>{{state}}</td>
                <td>{{createdTime}}</td>
            </tr>
            {{/incidents}}

        </table>

        {{>components/table-pagination}}

        <script type="application/javascript">
            document.addEventListener('DOMContentLoaded', function(){
                listSort('bpmnProcessId','bpmn-process-id')
            }, false);
            document.addEventListener('DOMContentLoaded', function(){
                listSort('errorType','error-type')
            }, false);
            document.addEventListener('DOMContentLoaded', function(){
                listSort('created','created-time')
            }, false);
            document.addEventListener('DOMContentLoaded', function() {
                bindQueryParamToElement("filter-process-id", "bpmnProcessId");
                bindQueryParamToElement("filter-error-type", "errorType");
                bindQueryParamToElement("filter-created-after", "createdAfter");
                bindQueryParamToElement("filter-created-before", "createdBefore");
            }, false);
            document.addEventListener('DOMContentLoaded', function() {
                function createLastTimeHandler(timeDiff) {
                    return function() {
                        'use strict';
                        let past = new Date().getTime() - timeDiff;
                        let newVal = new Date(past).toISOString();
                        document.getElementById("filter-created-after").setAttribute("value", newVal);
                    }
                }
                $("#last-7-days").click(createLastTimeHandler(1000*60*60*24*7));
                $("#last-24-hours").click(createLastTimeHandler(1000*60*60*24));
                $("#last-12-hours").click(createLastTimeHandler(1000*60*60*12));
                $("#last-6-hours").click(createLastTimeHandler(1000*60*60*6));
                $("#last-1-hour").click(createLastTimeHandler(1000*60*60));
                $("#last-10-minutes").click(createLastTimeHandler(1000*60*10));
            }, false);
        </script>
    </div>
</div>

{{>layout/footer}}
